<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Magic-Stylez</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link href="//berlinmagic.github.io/magic_stylez/assets/application-66fb1f2e4911509637ca00d3205577df.css" media="all" rel="stylesheet" />
  <script src="//berlinmagic.github.io/magic_stylez/assets/application-cfc5eed747f12eef72cae6534cc5dedb.js"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="IvGfPtPUiuJNaHBDLqqMiu0qOk4FWegdZWuIhvZQHH0=" name="csrf-token" />
  <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
  <link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f1706407301f788c54691b6995f60a8f.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f34b54df445838a4f6bdac98bd904570.png" rel="shortcut icon" type="image/png" />
  <link rel="apple-touch-icon-precomposed" sizes="144x144"href="//berlinmagic.github.io/magic_stylez/assets/ico/apple-touch-icon-144x144-precomposed-95cd4cdaa08b7ce4607374cb845aa89f.png" />
  <link rel="apple-touch-icon-precomposed" sizes="114x114"href="//berlinmagic.github.io/magic_stylez/assets/ico/apple-touch-icon-114x114-precomposed-dff6f19fe419b0d0ca7a513b54eb8b34.png" />
  <link rel="apple-touch-icon-precomposed" sizes="72x72"href="//berlinmagic.github.io/magic_stylez/assets/ico/apple-touch-icon-72x72-precomposed-9deaa78f902e5d66b931681b43fa5129.png" />
  <link rel="apple-touch-icon-precomposed" href="//berlinmagic.github.io/magic_stylez/assets/ico/apple-touch-icon-57x57-precomposed-0b5096220f084a3e886573eea7adf21e.png" />
  <link rel="apple-touch-icon" href="//berlinmagic.github.io/magic_stylez/assets/ico/apple-touch-icon-222472c72cf52e4aaf027b6a8a3f6bb3.png" />
  <script type="text/javascript" charset="utf-8">
    App = {};
    App.Environment = "production";
  </script>
</head>
<body class="main_template">
  <a href="#" id="mobile_header" class="inline_table center_text">
    <div class="cell icn col-1 middle">
      <i class="olicons-show-sb"></i>
    </div>
    <div class="cell col-10 middle">
      <span id="current-view-name">Magic-Stylez</span>
    </div>
    <div class="cell icn col-1 middle">
      <i class="olicons-show-sb"></i>
    </div>
  </a>
  <div id="aside">
  <div class="aside-content">
    <ul class="nav_list flat">
      <li class="current active"><a class="app_lnk lst_lnk" data-target="" href="#">Magic-Stylez</a></li>
          <li><a class="lst_lnk" href="#">Content</a>
            <ul class="sub_nav">
                  <li><a class="app_lnk lst_lnk" data-target="content/banner" href="#">Banner</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/box" href="#">Box</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/buttons" href="#">Buttons</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/buttons_nice" href="#">Buttons Nice</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/forms" href="#">Forms</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/helper" href="#">Helper</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/inputs" href="#">Inputs</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/labels" href="#">Labels</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/pictures" href="#">Pictures</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="content/tables" href="#">Tables</a></li>
            </ul>
          </li>
          <li><a class="lst_lnk" href="#">Effects</a>
            <ul class="sub_nav">
                  <li><a class="app_lnk lst_lnk" data-target="effects/flip" href="#">Flip</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="effects/noise" href="#">Noise</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="effects/shadows" href="#">Shadows</a></li>
            </ul>
          </li>
          <li><a class="lst_lnk" href="#">Elements</a>
            <ul class="sub_nav">
                  <li><a class="app_lnk lst_lnk" data-target="elements/circle_diagram" href="#">Circle Diagram</a></li>
            </ul>
          </li>
          <li><a class="lst_lnk" href="#">Helper</a>
            <ul class="sub_nav">
                  <li><a class="app_lnk lst_lnk" data-target="helper/arrow_infos" href="#">Arrow Infos</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="helper/crossed_text" href="#">Crossed Text</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="helper/divider" href="#">Divider</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="helper/dots" href="#">Dots</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="helper/sass_helper" href="#">Sass Helper</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="helper/text" href="#">Text</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="helper/three_previews" href="#">Three Previews</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="helper/tile_buckets" href="#">Tile Buckets</a></li>
            </ul>
          </li>
          <li><a class="lst_lnk" href="#">Icons</a>
            <ul class="sub_nav">
                  <li><a class="app_lnk lst_lnk" data-target="icons/bettericons" href="#">Bettericons</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="icons/glyphicons" href="#">Glyphicons</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="icons/icomoon" href="#">Icomoon</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="icons/magicons" href="#">Magicons</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="icons/olicons" href="#">Olicons</a></li>
            </ul>
          </li>
          <li><a class="lst_lnk" href="#">Layout</a>
            <ul class="sub_nav">
                  <li><a class="app_lnk lst_lnk" data-target="layout/at_first" href="#">Introduction</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="layout/corset" href="#">Corset</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="layout/fullpage_table" href="#">Fullpage Table</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="layout/layout_table" href="#">Layout Table</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="layout/section" href="#">Section</a></li>
            </ul>
          </li>
          <li><a class="lst_lnk" href="#">Templates</a>
            <ul class="sub_nav">
                  <li><a class="app_lnk lst_lnk" data-target="templates/aside-nav" href="#">Aside Nav</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="templates/fixed_header" href="#">Fixed Header</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="templates/fixed_subnav" href="#">Fixed Subnav</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="templates/slidebar_header" href="#">Slidebar Header</a></li>
                  <li><a class="app_lnk lst_lnk" data-target="templates/slidebar_subnav" href="#">Slidebar Subnav</a></li>
            </ul>
          </li>
      <li><a class="app_lnk lst_lnk" data-target="app/changelog" href="#">Changelog</a></li>
    </ul>
    <br/>
    
    <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-default btn-divided">
      <span class="icn"><i class="icomoon-github3"></i></span>
      <span>SourceCode</span>
    </a>
    <div class="clearfix"></div>
    <br/>
  </div>
</div>
  <div class="clearfix"></div>
  <div id="app_content">
    <div class="section head">
  <div class="corset">
    <div class="row">
      <div class="col-sm-9 col-xs-6">
        <h1>magic-stylez</h1>
      </div>
      <div class="col-sm-3 col-xs-6">
        <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
          <span class="icn"><i class="icomoon-github3"></i></span>
          <span>SourceCode</span>
        </a>
      </div>
    </div>
  </div>
</div>


<div class="section flatted">
  <div class="corset tight">
    <p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
  </div>
</div>

<div class="section hard-top">
  <div class="corset center_text">
    <h2>Warning</h2>
    <p class="loud">This Gem is still work in process!</p>
    <p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
    <p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
  </div>
</div>

<div class="section hard-top">
  <div class="corset tight">
    <h3>Dependencies</h3>
    <ul class="list loud">
      <li><a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a></li>
      <li><a href="http://bourbon.io/" target="_blank">bourbon</a></li>
    </ul>
    <p>(both are allready included)</p>
  </div>
</div>

<div class="section hard-top">
  <div class="corset tight">
    <h3 class="loud">Usage</h3>
    <hr/>
    <p class="highlight"><i class="olicons-hide-filter"></i> add the gem to your applications gemfile</p>
    <pre><code>gem "magic_stylez"</code></pre>
    <br/>
    <p class="highlight"><i class="olicons-hide-filter"></i> run the generator</p>
    <pre><code>$ rails g magic_stylez:install</code></pre>
    <br/>
    <p class="highlight"><i class="olicons-hide-filter"></i> add to stylesheets</p>
    <pre><code>SASS:
  @import 'magic-stylez'; // import all
  @import 'magic-min';    // import basic
CSS:
  //= 'magic-stylez'; /* import all */
  //= 'magic-min';    /* import basic */</code></pre>
    <br/>
    <p class="highlight"><i class="olicons-hide-filter"></i> add to javascripts</p>
    <pre><code>  //= 'magic-stylez'; /* import all */
  //= 'magic-min';    /* import basic */</code></pre>
  </div>
</div>


<div class="section hard-top">
  <div class="corset tight">
    <h2 class="loud">NEWs</h2>
    <hr/>
    <p class="loud"><i class="olicons-hide-filter"></i> <em>rail-ujs.js</em> file optimized for splitted and divided buttons</p>
    <pre><code>//= require magic/ext/rails-ujs</code></pre>
    <hr/>
    <p class="highlight"><i class="olicons-hide-filter"></i> magic-styles update generator</p>
    <p class="loud"><i class="olicons-hide-filter"></i> in the process I often add new variables to the corporate files</p>
    <p class="loud"><i class="olicons-hide-filter"></i> what causes "Missing variable!" when you update to new version</p>
    <p class="loud"><i class="olicons-hide-filter"></i> this generator adds all new variables without touching your settings</p>
    <pre><code>$ rails g magic_stylez:update</code></pre>
    
    <br/>
    <hr class="half" />
    <br/>
    <p class="louder">Please allways look in the new <a href="#app/changelog" data-target="app/changelog">Changelog</a> for recent chnages.</p>
    <br/>
    
  </div>
</div>


<div class="section hard-top">
  <div class="corset tight">
    <h3 class="loud">On to / To Do</h3>
    <hr/>
    <p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
    <p class="loud"><i class="icomoon-checkbox-unchecked"></i> npm & bower compatiblity</p>
    <p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
    <p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
    <p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double css</p>
    <p class="loud"><i class="icomoon-checkbox-unchecked"></i> learn english :)</p>
    <p class="loud"><i class="icomoon-checkbox-unchecked"></i> improve documentation</p>
  </div>
</div>


<div class="section hard-top">
  <div class="corset tight">
    <h3>Thanks</h3>
    <p class="loud">
      A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
      so thank you guys for the great work.
    </p>
    <p class="loud">
      Same goes for <a href="http://bourbon.io/" target="_blank">bourbon</a> thanks for a lightweight helper set.
    </p>
    <p class="loud">Also thanks to all the people, how share their knowlegde on <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a>.</p>
  </div>
</div>

<div class="section hard-top">
  <div class="corset tight">
    <h3>Authors</h3>
    <ul class="list">
      <li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
      <li>many others ...</li>
    </ul>
  </div>
</div>

<div class="section hard-top">
  <div class="corset tight">
    <h3>License</h3>
    <p class="loud">MIT-License</p>
  </div>
</div>






<div class="section shine-top flatted">
  <div class="corset">
    <p class="center_text">© 2014 Torsten Wetzel (berlinmagic UG)</p>
  </div>
</div>

  </div>
  <div class="clearfix"></div>
</body>
</html>
